<template>
    <div class="skuCardItem" v-loading="loading">
        <el-tag effect="plain" v-for="(tag, index) in item.goodsSkusCardValue" :key="index" closable
            :disable-transitions="false" @close="handleClose(tag)" class="skuCardItemTag">
            <el-input class="skuCardItemInput" v-model="tag.text" placeholder="选项值" size="small"
                @change="handleChange($event, tag)"></el-input>
        </el-tag>
        <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" size="small" @keyup.enter="handleInputConfirm"
            @blur="handleInputConfirm" />
        <el-button v-else size="small" @click="showInput" class="skuCardItemButton">
            + 添加选项值
        </el-button>
    </div>
</template>
<script setup>
import { initSkusCardItem } from '@/hooks/sku'

const props = defineProps({
    skusCardId: [Number, String]
})

const {
    item,
    inputValue,
    inputVisible,
    InputRef,
    handleClose,
    showInput,
    handleInputConfirm,
    loading,
    handleChange
} = initSkusCardItem(props.skusCardId)


</script>
<style scoped lang="less">
.skuCardItem {
    display: flex;

    .skuCardItemTag {
        margin: 0 5px;

        .skuCardItemInput {
            margin-left: -10px;
        }

    }

    .skuCardItemButton {
        margin-left: 5px;
    }
}
</style>